Day29 第三方登入－臉書 (取得登入資訊)

11th鐵人賽

mikewang

團隊G社三劍客

2019-10-15 08:52:00

1841 瀏覽

分享至

20191015

前言

今天的內容是延續Day28的臉書登入，加入取得照片網址的功能。

現在，我們馬上開始！

練習過程

因為今天加入新功能，首先更新Podfile

target 'Day28FBLogin' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for Day28FBLogin
  pod 'FBSDKCoreKit'
  pod 'FBSDKLoginKit'
  pod 'FBSDKShareKit'
  pod 'Alamofire'
end

由於之前已安裝過，這次直接更新即可

pod update

一樣開啟Day28專案(Day28FBLogin.xcworkspace)，可以看到套件已安裝完成

以Source Code方式修改info.plist，加入以下內容

<key>FacebookAdvertiserIDCollectionEnabled</key>
<true/>
<key>FacebookAdvertiserIDCollectionEnabled</key>
<true/>
<key>FacebookAutoLogAppEventsEnabled</key>
<true/>

在viewDidLoad事件中，加入以下程式碼

let params = ["fields":"name, email , picture.type(large), gender"]
let request = GraphRequest(graphPath: "/me", parameters: params)
let connection = GraphRequestConnection()

connection.add(request, batchParameters: params) { (conn, result, error) in
     print(result!)
     guard let fbResult = result as? Dictionary<String, Any>,
         let picture = fbResult["picture"] as? Dictionary<String, Any>,
         let pictureData = picture["data"] as? Dictionary<String, Any>,
         let url = pictureData["url"] as? String
         else { return }
     print("url")
     print(url)
     
     self.setUserImage(url)     
 }
 
 connection.start()

params用來設定我們要從FB登入資訊中，取出的欄位
建立request物件，並設定參數
建立connection物件以及方法
#7 ~ #11行，用來取得使用者照片的url，這邊直接採用Dictionary實作，讀者也可以自訂model，並用反序列化的方法完成

由於網路上的資料還滿片段的，而新版本的方法與文件又有一點差異，因此一開始透過print()方法，把所有取得資訊都列印出來，之後才慢慢完成

由於等等要顯示照片，我們先在storyboard加入UIImage，並與程式碼做連結

@IBOutlet weak var fbImageView: UIImageView!

self.setUserImage(url)方法

前面取得照片的url後，我們新增一個自訂方法，用來設定使用者的照片，由於是在closure內呼叫，因此我們加上『self』

private func setUserImage(_ url: String) -> DataRequest {
    return Alamofire.request(url).response { (response) in
        guard let data = response.data,
            let image = UIImage(data: data)
            else { return }
                    
        self.fbImageView.image = image            
        self.fbImageView.clipsToBounds = true
        self.fbImageView.layer.cornerRadius = self.fbImageView.frame.size.width / 2
        
    }
}